<template>
    <div class="container">
        <div>
            <el-page-header @back="goBack" style="border-bottom: 1px solid #f1f1f1;padding: 20px;"
                :content="operation ? '题目新增' : '题目修改'"></el-page-header>
        </div>
        <div class="practice-info">
            <el-row>
                <el-col :span="12">
                    <div
                        style="min-height: calc(100vh - 130px);margin: 10px;background-color: #fff;padding: 10px;box-sizing: border-box;border-radius: 5px;">
                        <div class="route-path">
                            <button :disabled="selected.type !== practiceType.type && !operation"
                                :style="{ backgroundColor: selected.type === practiceType.type ? 'rgb(64, 158, 255)' : 'rgb(255, 255, 255)', color: selected.type === practiceType.type ? '#fff' : '#b598a1' }"
                                @click="practiceTypeSelected(practiceType)"
                                v-for="(practiceType, index) in practiceTypes" :key="index">{{
                                practiceType.detail}}</button>
                        </div>
                        <div style="margin: 10px 5px;">
                            <div v-if="selected.type === 1">
                                <OneSelected :data="data" @on-listenner="oneSelectedListenner" />
                            </div>
                            <div v-else-if="selected.type === 2">
                                <DoubleSelected :data="data" @on-listenner="doubleSelectedListenner" />
                            </div>
                            <div v-else-if="selected.type === 3">
                                <WordPut :data="data" @on-listenner="wordPutSelectedListenner" />
                            </div>
                            <div v-else-if="selected.type === 4">
                                <Judgment :data="data" @on-listenner="judgeSelectedListenner" />
                            </div>
                            <div v-else>
                                <Discuss :data="data" @on-listenner="discussSelectedListenner" />
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div
                        style="min-height: calc(100vh - 130px);margin: 10px;background-color: #fff;padding: 10px;box-sizing: border-box;border-radius: 5px;">
                        <div style="padding: 20px 5px;font-size: 14px;color: rgb(113, 114, 114);">4. 其他信息</div>
                        <el-row>
                            <el-row>
                                <span class="dialog-hover">科目</span>
                            </el-row>
                            <el-radio-group style="padding: 0 6px;" v-model="data.projectId">
                                <el-radio style="margin-top: 5px;font-size: 30px;" :key="index" :label="tag.id"
                                    v-for="(tag, index) in projectTypeList">{{ tag.name }}</el-radio>
                            </el-radio-group>
                        </el-row>
                        <el-row style="margin: 12px 0;">
                            <el-row>
                                <span class="dialog-hover">题目分值</span>
                            </el-row>
                            <el-input-number style="margin-left: 5px;" size="small" v-model="data.score"
                                :step="1"></el-input-number>
                        </el-row>
                        <el-row style="font-size: 14px;padding-left: 5px;color: rgb(113, 114, 114);">
                            <p>题目新增注意事项</p>
                            <p>1. 按照顺序配置题目的相关信息。按照“1,2,3,4”点依次配置。</p>
                            <p>2. 题型不同，配置的解析也不同。可选中题型栏配置不同题型。</p>
                            <p>已经配置完毕，立即<span style="margin: 0 10px;font-size: 16px;" @click="saveOrUpdate"
                                    class="text-button">
                                    {{ operation ? '新增题目' : '修改题目' }}<i class="el-icon-arrow-right"></i>
                                </span></p>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import Discuss from "@/components/practice-type/Discuss"
import DoubleSelected from "@/components/practice-type/DoubleSelected"
import Judgment from "@/components/practice-type/Judgment"
import OneSelected from "@/components/practice-type/OneSelected"
import WordPut from "@/components/practice-type/WordPut"
export default {
    components: { Discuss, DoubleSelected, Judgment, OneSelected, WordPut },
    data() {
        return {
            data: { question: [], answer: [], askItem: '', rightAnswer: [], projectId: null, score: null },
            questionsList: [{ type: 'A', value: '' }, { type: 'B', value: '' }, { type: 'C', value: '' }, { type: 'D', value: '' }],
            answersList: [{ type: 'A', value: '' }, { type: 'B', value: '' }, { type: 'C', value: '' }, { type: 'D', value: '' }],
            requestQuestion: [{ type: 'A', value: '该描述是对的' }, { type: 'B', value: '该描述是错的' }],
            selected: {},
            practiceTypes: [],
            projectTypeList: [],
            editInfo: {},
            operation: null,
            todoData: {},
            editStatus: false,
            defaultPracticeType: {}
        }
    },
    created() {
        this.getPracticeTypes();
        this.loadAllProjectType();
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        // 单选题修改
        oneSelectedPracticeUpdate() {
            const practiceInfo = sessionStorage.getItem('practiceInfo');
            this.editInfo = JSON.parse(practiceInfo);
            this.data.practiceType = this.selected.type; // 题型
            this.data.askItem = this.editInfo.askItem; // 问题
            this.data.question = JSON.parse(this.editInfo.question); // 选项
            this.data.answer = JSON.parse(this.editInfo.answer); // 选项解析
            this.data.projectId = this.editInfo.projectId; // 科目
            this.data.score = this.editInfo.score; // 单题分数
            this.data.id = this.editInfo.id; // 题目的ID
            this.data.rightAnswer = JSON.parse(this.editInfo.rightAnswer); //正确答案
        },
        // 单选题新增
        oneSelectedPracticeSave() {
            this.data.question = this.questionsList;
            this.data.answer = this.answersList;
        },
        // 多选题修改
        doubleSelectedPracticeUpdate() {
            const practiceInfo = sessionStorage.getItem('practiceInfo');
            this.editInfo = JSON.parse(practiceInfo);
            this.data.practiceType = this.selected.type; // 题型
            this.data.askItem = this.editInfo.askItem; // 问题
            this.data.question = JSON.parse(this.editInfo.question); // 选项
            this.data.answer = JSON.parse(this.editInfo.answer); // 选项解析
            this.data.projectId = this.editInfo.projectId; // 科目
            this.data.score = this.editInfo.score; // 单题分数
            this.data.id = this.editInfo.id; // 题目的ID
            this.data.rightAnswer = JSON.parse(this.editInfo.rightAnswer); //正确答案
        },
        // 多选题新增
        doubleSelectedPracticeSave() {
            this.data.question = this.questionsList;
            this.data.answer = this.answersList;
        },
        // 填空题修改
        wordPutSelectedPracticeUpdate() {
            const practiceInfo = sessionStorage.getItem('practiceInfo');
            this.editInfo = JSON.parse(practiceInfo);
            this.data.practiceType = this.selected.type; // 题型
            this.data.askItem = this.editInfo.askItem; // 问题
            this.data.projectId = this.editInfo.projectId; // 科目
            this.data.score = this.editInfo.score; // 单题分数
            this.data.id = this.editInfo.id; // 题目的ID
            this.data.rightAnswer = JSON.parse(this.editInfo.rightAnswer); //正确答案
        },
        // 填空题新增
        wordPutSelectedPracticeSave() {
            // 不做特殊处理
        },
        // 判断题修改
        judgeSelectedPracticeUpdate() {
            const practiceInfo = sessionStorage.getItem('practiceInfo');
            this.editInfo = JSON.parse(practiceInfo);
            this.data.practiceType = this.selected.type; // 题型
            this.data.askItem = this.editInfo.askItem; // 问题
            this.data.question = JSON.parse(this.editInfo.question); // 选项
            this.data.projectId = this.editInfo.projectId; // 科目
            this.data.score = this.editInfo.score; // 单题分数
            this.data.id = this.editInfo.id; // 题目的ID
            this.data.rightAnswer = JSON.parse(this.editInfo.rightAnswer); //正确答案
        },
        // 论述题新增
        discussSelectedPracticeSave() {
            // 不做特殊处理
        },
        // 论述题修改
        discussSelectedPracticeUpdate() {
            const practiceInfo = sessionStorage.getItem('practiceInfo');
            this.editInfo = JSON.parse(practiceInfo);
            this.data.practiceType = this.selected.type; // 题型
            this.data.askItem = this.editInfo.askItem; // 问题
            this.data.projectId = this.editInfo.projectId; // 科目
            this.data.score = this.editInfo.score; // 单题分数
            this.data.id = this.editInfo.id; // 题目的ID
        },
        // 判断题新增
        judgeSelectedPracticeSave() {
            this.data.question = this.requestQuestion;
        },
        // 监听单选题回调
        oneSelectedListenner(data) {
            this.todoData = data;
        },
        // 监听多选题组件回调
        doubleSelectedListenner(data) {
            this.todoData = data;
        },
        // 监听填空题组件回调
        wordPutSelectedListenner(data) {
            this.todoData = data;
        },
        // 监听判断题组件回调
        judgeSelectedListenner(data) {
            this.todoData = data;
        },
        // 监听论述题回调
        discussSelectedListenner(data) {
            this.todoData = data;
        },
        // 执行新增或编辑操作
        saveOrUpdate() {
            let apiUrl = '';
            this.operation ? apiUrl = '/practice/save' : apiUrl = '/practice/update';
            const practice = {
                id: this.operation ? null : this.todoData.id,
                askItem: this.todoData.askItem,
                answer: JSON.stringify(this.todoData.answer),
                question: JSON.stringify(this.todoData.question),
                practiceType: this.todoData.practiceType,
                projectId: this.data.projectId,
                rightAnswer: JSON.stringify(this.todoData.rightAnswer),
                score: this.data.score
            }
            this.$axios.post(apiUrl, practice).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    this.$swal.fire({
                        title: this.operation ? '新增题目' : '修改题目',
                        text: this.operation ? '新增成功' : '修改成功',
                        icon: 'success',
                        showConfirmButton: false,
                        timer: 1000,
                    });
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1200)
                }
            }).catch(error => {
                this.$swal.fire({
                    title: '题目操作',
                    text: error,
                    icon: 'error',
                    showConfirmButton: false,
                    timer: 1000,
                });
            })
        },
        // 加载全部的科目
        loadAllProjectType() {
            this.$axios.post(`/project-type/query`, {}).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    this.projectTypeList = data.data;
                }
            })
        },
        // 题型选中回调
        practiceTypeSelected(practiceType) {
            this.data.practiceType = practiceType.type;
            this.selected = practiceType;
            // 编辑时，组件是确定的
            if (!this.operation && this.editStatus) {
                this.$message('编辑时不可选其他组件');
                return;
            }
            // 单选题
            if (practiceType.type === 1) {
                // 新增
                if (this.operation) {
                    this.oneSelectedPracticeSave();
                    return;
                }
                // 修改
                this.oneSelectedPracticeUpdate();
                this.editStatus = true;
                return;
            }
            if (practiceType.type === 2) {
                // 新增
                if (this.operation) {
                    this.doubleSelectedPracticeSave();
                    return;
                }
                // 修改
                this.doubleSelectedPracticeUpdate();
                this.editStatus = true;
                return;
            }
            if (practiceType.type === 3) {
                // 新增
                if (this.operation) {
                    this.wordPutSelectedPracticeSave();
                    return;
                }
                // 修改
                this.wordPutSelectedPracticeUpdate();
                this.editStatus = true;
                return;
            } else if (practiceType.type === 4) {
                // 新增
                if (this.operation) {
                    this.judgeSelectedPracticeSave();
                    return;
                }
                // 修改
                this.judgeSelectedPracticeUpdate();
                this.editStatus = true;
                return;
            } else if (practiceType.type === 5) {
                // 新增
                if (this.operation) {
                    this.discussSelectedPracticeSave();
                    return;
                }
                // 修改
                this.discussSelectedPracticeUpdate();
                this.editStatus = true;
                return;
            }
        },
        getPracticeTypes() {
            this.$axios.get('/practice/getPracticeTypes').then(response => {
                if (response.data.code === 200) {
                    this.practiceTypes = response.data.data;
                    this.operationJudge();
                }
            }).catch(error => {
                console.log(error);
            })
        },
        // 如果是新增，直接默认选中单选题，如果是修改，按照题型渲染不一样的题型组件
        operationJudge() {
            const practiceIsAdd = sessionStorage.getItem('practiceIsAdd');
            // 将新增-修改标志位存储起来
            this.operation = practiceIsAdd === 'save';
            const storageJson = sessionStorage.getItem('practiceInfo');
            if (!this.operation) {
                const practiceInfo = JSON.parse(storageJson);
                // 解析题型，渲染对应的组件
                const practiceType = { type: practiceInfo.practiceType };
                console.log(practiceType);
                this.practiceTypeSelected(practiceType);
            } else {
                const practiceType = { type: 1 };
                this.practiceTypeSelected(practiceType);
            }
        },
    }
}

</script>
<style lang="scss" scoped>
.container {
    background-color: #fafafa;
    min-height: 100vh;

    .practice-info {
        padding: 10px 0px;
        box-sizing: border-box;
    }

    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .route-path {
        line-height: 60px;

        button {
            margin-left: 5px;
            margin-right: 20px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 3px;
            padding: 3px 5px;
            color: rgb(92, 92, 91);
            transition: all .3s;
            border: none;
        }
    }
}

.operation-btn {
    display: inline-block;
    padding: 5px 15px;
    background-color: rgb(0, 0, 0);
    font-size: 12px;
    color: rgb(201, 224, 228);
    border-radius: 3px;
}
</style>